<template>
  <div class="app-container p-n">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="23">
        <div class="grid-content bg-white p-10">
          <el-row :gutter="10">
            <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="3">
              <div class="grid-content p-t_b-5">
                <el-input
                  v-model="search.keyword"
                  placeholder="输入查询信息"
                  prefix-icon="el-icon-search"
                  clearable
                />
              </div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2">
              <div class="grid-content p-t_b-5">
                <el-select v-model="search.userRating" placeholder="用户评分" clearable>
                  <el-option label="2分" value="2" />
                  <el-option label="4分" value="4" />
                  <el-option label="6分" value="6" />
                  <el-option label="8分" value="8" />
                  <el-option label="10分" value="10" />
                </el-select>
              </div>
            </el-col>
            <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="6">
              <div class="grid-content p-t_b-5">
                <el-row :gutter="10">
                  <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="6">
                    <div class="grid-content text-right p-t-10">
                      <span>下单日期</span>
                    </div>
                  </el-col>
                  <el-col :xs="12" :sm="16" :md="16" :lg="16" :xl="18">
                    <div class="grid-content">
                      <el-date-picker
                        v-model="searchCreateTime"
                        :picker-options="pickerOptions"
                        class="full-width"
                        type="datetimerange"
                        align="right"
                        unlink-panels
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="-"
                        @change="setSearchCreateTime"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="6">
              <div class="grid-content p-t_b-5">
                <el-row :gutter="10">
                  <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="6">
                    <div class="grid-content text-right p-t-10">
                      <span>完工日期</span>
                    </div>
                  </el-col>
                  <el-col :xs="12" :sm="16" :md="16" :lg="16" :xl="18">
                    <div class="grid-content">
                      <el-date-picker
                        v-model="searchFinishTime"

                        :picker-options="pickerOptions"
                        class="full-width"
                        type="datetimerange"
                        align="right"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="setSearchFinishTime"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :xs="9" :sm="8" :md="6" :lg="3" :xl="3">
              <div class="grid-content p-t_b-5">
                <el-button type="primary" icon="el-icon-search" @click="loadScoreList">搜索</el-button>
              </div>
            </el-col>
            <el-col :xs="9" :sm="8" :md="6" :lg="2" :xl="2">
              <div class="grid-content p-t_b-5 text-right">
                <el-popover ref="popover" placement="bottom" width="300" trigger="click">
                  <p
                    class="tips-color"
                    align="justify"
                  >&ensp;&ensp;工单评分=【用户评分*20%+时效评分*30%+催投评分*50%】*特殊扣分项，计算更新时间为实时。计算工单评分时若催投扣分的师傅 与 完工师傅不为同一人，取完工师傅的催投评分。</p>
                </el-popover>
                <i v-popover:popover class="el-icon-question info-tips" />
              </div>
            </el-col>
          </el-row>
          <div class="hr-line-dashed" />
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <div class="grid-content min-h-600">
                <el-table
                  ref="singleTable"
                  :data="tableData"
                  highlight-current-row
                  style="width: 100%"
                  height="460"
                  stripe
                  @row-dblclick="handleRowDblclick"
                >
                  <el-table-column type="index" label="序号" width="50"/>
                  <el-table-column label="工单编号">
                    <template slot-scope="scope">
                      <span>{{ scope.row.orderNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="用户评分">
                    <template
                      slot-scope="scope"
                    >{{ scope.row.userRating!==null?(scope.row.userRating+"分"):"--" }}</template>
                  </el-table-column>
                  <el-table-column label="时效评分">
                    <template
                      slot-scope="scope"
                    >{{ scope.row.agingScore!==null?(scope.row.agingScore+"分"):"--" }}</template>
                  </el-table-column>
                  <el-table-column label="催投评分">
                    <template
                      slot-scope="scope"
                    >{{ scope.row.pushScore!==null?(scope.row.pushScore+"分"):"--" }}</template>
                  </el-table-column>
                  <el-table-column label="特殊扣分项">
                    <template
                      slot-scope="scope"
                    >{{ scope.row.specialDeductions===1?scope.row.specialDeductions:"0" }}</template>
                  </el-table-column>
                  <el-table-column label="工单评分">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        @click="openScoreDetail(scope.row)"
                      >{{ scope.row.orderScore!==null?(scope.row.orderScore+"分"):"--" }}</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="完工师傅">
                    <template
                      slot-scope="scope"
                    >{{ scope.row.wokerName!==null ?(scope.row.wokerName +" "+ (scope.row.wokerPhone!==null?scope.row.wokerPhone:"--")):"--" }}</template>
                  </el-table-column>
                  <el-table-column label="下单时间">
                    <template
                      slot-scope="scope"
                    >{{ scope.row.createDatetime===null? "--" :scope.row.createDatetime |moment("YYYY-MM-DD HH:mm:ss") }}</template>
                  </el-table-column>
                  <el-table-column label="完工时间">
                    <template
                      slot-scope="scope"
                    >{{ scope.row.orderFinishTime===null?"--":scope.row.orderFinishTime |moment("YYYY-MM-DD HH:mm:ss") }}</template>
                  </el-table-column>
                </el-table>
                <el-dialog
                  :visible.sync="dialogScoreVisible"
                  title="评分详情"
                  show-close
                  width="40%"
                  @close="closeDdialogScore"
                >
                  <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                      <div class="grid-content">
                        <p>
                          <label>用户评价：</label>
                          <span
                            v-if="scoreDetail.evalTagNames===null || scoreDetail.evalTagNames.length===0"
                          >--</span>
                          <label v-else>
                            <el-tag
                              v-for="(tag, index) of scoreDetail.evalTagNames"
                              :key="index"
                              class="m-r-10"
                            >{{ tag.evaluationTagName }}</el-tag>
                          </label>
                        </p>
                        <p>
                          <label>完工用时：</label>
                          <span
                            v-if="scoreDetail.orderFinishTime && scoreDetail.allocateWorkerTime"
                          >{{ scoreDetail.orderFinishTime | moment('diff',scoreDetail.allocateWorkerTime,"hours") }} 小时</span>
                          <span v-else>--</span>
                        </p>
                        <p>
                          <label>催投：</label>
                          <span
                            v-if="scoreDetail.cusInfoOrders===null || scoreDetail.cusInfoOrders.length===0"
                          >--</span>
                          <label v-else style="color: #606266;font-weight: 500;">
                            <span
                              v-for="(info, index) of scoreDetail.cusInfoOrders"
                              :key="index"
                              class="m-r-10"
                            >{{ info.finalTypeName }}</span>
                          </label>
                        </p>
                      </div>
                    </el-col>
                  </el-row>
                </el-dialog>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <div class="grid-content">
                <el-pagination
                  :current-page="search.page"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="search.pageSize"
                  :total="total"
                  class="text-right"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOrdeScores, getScoreDetail } from '@/api/evaluation'
// import { parseTime, pickerOptions } from '@/utils'
// import axios from 'axios'

export default {
  filters: {},
  data() {
    return {
      total: 0,
      currentRow: null,
      searchLoading: false,
      searchCreateTime: [],
      searchFinishTime: [],
      search: {
        page: 1,
        pageSize: 10,
        pageNumber: 0,
        keyword: '',
        userRating: null,
        createStarTime: '',
        createEndTime: '',
        finishStarTime: '',
        finishEndTime: ''
      },
      tableData: [],
      scoreId: null,
      scoreDetail: { evalTagNames: [], cusInfoOrders: [] },
      dialogScoreVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.loadScoreList()
  },
  methods: {
    setSearchCreateTime() {
      if (this.searchCreateTime) {
        this.search.createStarTime = this.searchCreateTime[0]
        this.search.createEndTime = this.searchCreateTime[1]
      } else {
        this.search.createStarTime = null
        this.search.createEndTime = null
      }
    },
    setSearchFinishTime() {
      if (this.searchFinishTime) {
        this.search.finishStarTime = this.searchFinishTime[0]
        this.search.finishEndTime = this.searchFinishTime[1]
      } else {
        this.search.finishStarTime = null
        this.search.finishEndTime = null
      }
    },
    loadScoreList() {
      // var vd=this;
      this.searchLoading = true
      this.search.pageNumber = (this.search.page - 1) * this.search.pageSize
      getOrdeScores(this.search)
        .then(response => {
          if (response.data.status === 'success') {
            if (response.data.data.list.length === 0) {
              this.searchLoading = false
              this.tableData = []
              return
            }
            this.total = response.data.data.total
            this.tableData = response.data.data.list
            this.searchLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.searchLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.searchLoading = false
        })
    },
    handleSizeChange(val) {
      this.search.pageSize = val
      this.loadScoreList()
    },
    handleCurrentChange(val) {
      this.search.page = val
      this.loadScoreList()
    },
    openScoreDetail(row) {
      var vd = this
      vd.dialogScoreVisible = true
      var data = {
        scoreId: row.scoreId
      }
      getScoreDetail(data)
        .then(response => {
          if (response.data.status === 'success') {
            if (response.data.data === null) {
              vd.scoreDetail = { evalTagNames: [], cusInfoOrders: [] }
              return
            }
            vd.scoreDetail = response.data.data
            if (response.data.data.evalTagNames === null) {
              vd.scoreDetail.evalTagNames = []
            }
            if (response.data.data.cusInfoOrders === null) {
              vd.scoreDetail.cusInfoOrders = []
            }
            console.log(response.data.data.evalTagNames.length === 0)
          } else if (response.data.status === 'token_check_faild') {
            vd.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
          vd.$message({
            message: '数据加载失败',
            type: 'warning'
          })
        })
    },
    handleRowDblclick(row, column, event) {
      this.openScoreDetail(row)
    },
    closeDdialogScore() {
      this.dialogScoreVisible = false
    }
  }
}
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-white {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  height: 100%;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f3f3f4;
}
.el-select {
  width: 100%;
}
.full-width {
  width: 100% !important;
}
.hr-line-dashed {
  border-top: 1px dashed #e7eaec;
  color: #ffffff;
  background-color: #ffffff;
  height: 1px;
  margin: 20px 0;
}
label {
  color: #999;
  font-weight: 600;
}

.text-right {
  text-align: right;
}
.m-t-none {
  margin-top: 0;
}
.m-r-10 {
  margin-right: 10px;
}
.p-l-5 {
  padding-left: 5px;
}
.p-n {
  padding: 0px;
}
.p-5 {
  padding: 5px;
}
.p-10 {
  padding: 10px;
}
.p-20 {
  padding: 20px;
}
.p-t-10 {
  padding-top: 10px;
}
.p-t-15 {
  padding-top: 15px;
}
.p-t-20 {
  padding-top: 20px;
}
.p-t_b-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.p-t_b-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.min-h-600 {
  min-height: 600px;
}
.default-color {
  color: #409eff;
}
.info-tips {
  font-size: 24px;
  color: #ff9900;
}
.tips-color {
  color: #ff9900;
}
</style>
